<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="css.css">
    <style>
        #header {
            font-size: 1.3rem;5
        }

        #blse {
            font-size: 0.5625rem;
        }

        #bsln {
            font-size: 0.75rem;
            height: 3.0625rem;
            padding-top: 1.5rem;
        }

        #ld {
            height: 2.75rem;
            font-size: 0.8rem;
            padding-top: 1rem;
        }

        #blin {
            width: 3.75rem;
            font-size: 1rem;
            padding-top: 0.95rem;
        }

        #kl {
            height: 2.46875rem;
            font-size: 0.7rem;
            padding-top: 1rem;
        }

        #amstd {
            font-size: 0.5625rem;
            height: 2.7375rem;
            padding-top: 1.2rem;
        }

        #mnh {
            font-size: 0.8rem;
        }

        #wyn {
            height: 2.075rem;
            font-size: 0.65rem;
            padding-top: 0.8rem;
        }

        #ml {
            font-size: 0.8rem;
        }

        #lse {
            font-size: 0.53rem;
        }
        #rnw {
        	font-size: 0.7rem;
        }
    </style>
    <title></title>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script>
        function loadit() {
            $("#header").css({
                top: $(".main").height() * 0.06
            })
        }
    </script>
</head>

<body onload="loadit()">
<div class="main">
    <div class="header" id="header">
        Master guides at your command<br/>
        In depth insight on Europe
    </div>
    <div id="amstd" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(196)">Amsterdam</div>
    <div id="ld" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(19)">London</div>
    <div id="blin" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(17)">Berlin</div>
    <div id="blse" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(641)">Brussels</div>
    <div id="kl" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(18)">Cologne</div>
    <div id="bli" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(11)">Paris</div>
    <div id="mnh" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(15)">Munich</div>
    <div id="wyn" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(4149)">Vienna</div>
    <div id="rnw" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(8)">Geneva</div>
    <div id="lse" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(23)">Lucerne</div>
    <div id="mdl" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(10)">Madrid</div>
    <div id="bsln" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(9)">Barcelona</div>
    <div id="lm" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(1)">Rome</div>
    <div id="ml" class="btn" onclick="window.webkit.messageHandlers.imguider.postMessage(2)">Milan</div>
</div>
</body>

</html>
